<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户详情 - CRM旅游管理系统</title>
    <link rel="stylesheet" href="../../../shared/styles/apple-design.css">
    <link rel="stylesheet" href="../styles/customer-management.css">
    <link rel="stylesheet" href="../styles/customer-detail.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
        <div class="nav-container">
            <div class="nav-left">
                <button class="nav-back-btn" onclick="goBack()">
                    <i class="fas fa-chevron-left"></i>
                    <span>返回</span>
                </button>
                <div class="nav-breadcrumb">
                    <span class="breadcrumb-item">客户管理</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item">客户档案</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item active">客户详情</span>
                </div>
            </div>
            <div class="nav-right">
                <button class="nav-button" id="notifications-btn">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </button>
                <div class="user-menu">
                    <img src="https://via.placeholder.com/32x32/007AFF/FFFFFF?text=管" alt="用户头像" class="user-avatar">
                    <span class="user-name">管理员</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 客户基本信息头部 -->
        <section class="customer-header">
            <div class="customer-header-content">
                <div class="customer-basic-info">
                    <div class="customer-avatar-large">张</div>
                    <div class="customer-main-info">
                        <h1 class="customer-name">张大爷</h1>
                        <div class="customer-meta">
                            <span class="customer-number">CRM2025000001</span>
                            <span class="customer-gender male">男</span>
                            <span class="customer-age">68岁</span>
                        </div>
                        <div class="customer-status-tags">
                            <span class="status-badge status-active">有效客户</span>
                            <span class="health-badge health-good">健康良好</span>
                        </div>
                    </div>
                </div>
                <div class="customer-actions">
                    <button class="btn btn-outline" onclick="callCustomer()">
                        <i class="fas fa-phone"></i>
                        拨打电话
                    </button>
                    <button class="btn btn-outline" onclick="sendMessage()">
                        <i class="fas fa-comment"></i>
                        发送短信
                    </button>
                    <button class="btn btn-primary" onclick="editCustomer()">
                        <i class="fas fa-edit"></i>
                        编辑客户
                    </button>
                    <button class="btn btn-secondary" onclick="showMoreActions()">
                        <i class="fas fa-ellipsis-h"></i>
                    </button>
                </div>
            </div>
        </section>

        <!-- 客户详细信息 -->
        <div class="detail-container">
            <!-- 左侧主要信息 -->
            <div class="detail-main">
                <!-- 基础信息卡片 -->
                <div class="info-card">
                    <div class="card-header">
                        <h2 class="card-title">
                            <i class="fas fa-user"></i>
                            基础信息
                        </h2>
                        <button class="card-action-btn" onclick="editBasicInfo()">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="info-grid">
                            <div class="info-item">
                                <label class="info-label">客户姓名</label>
                                <span class="info-value">张大爷</span>
                            </div>
                            <div class="info-item">
                                <label class="info-label">性别</label>
                                <span class="info-value">男</span>
                            </div>
                            <div class="info-item">
                                <label class="info-label">出生日期</label>
                                <span class="info-value">1955-03-15</span>
                            </div>
                            <div class="info-item">
                                <label class="info-label">年龄</label>
                                <span class="info-value">68岁</span>
                            </div>
                            <div class="info-item">
                                <label class="info-label">身份证号</label>
                                <span class="info-value">110101195503151234</span>
                            </div>
                            <div class="info-item">
                                <label class="info-label">工作状态</label>
                                <span class="info-value">退休</span>
                            </div>
                            <div class="info-item">
                                <label class="info-label">职业信息</label>
                                <span class="info-value">退休教师</span>
                            </div>
                            <div class="info-item">
                                <label class="info-label">客户状态</label>
                                <span class="status-badge status-active">有效客户</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 联系方式卡片 -->
                <div class="info-card">
                    <div class="card-header">
                        <h2 class="card-title">
                            <i class="fas fa-address-book"></i>
                            联系方式
                        </h2>
                        <button class="card-action-btn" onclick="editContactInfo()">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="info-grid">
                            <div class="info-item">
                                <label class="info-label">主要手机</label>
                                <span class="info-value">
                                    <i class="fas fa-mobile-alt"></i>
                                    138****8001
                                    <button class="copy-btn" onclick="copyToClipboard('13800138001')" title="复制">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </span>
                            </div>
                            <div class="info-item">
                                <label class="info-label">备用手机</label>
                                <span class="info-value">139****8888</span>
                            </div>
                            <div class="info-item">
                                <label class="info-label">微信号</label>
                                <span class="info-value">zhangdaye1955</span>
                            </div>
                            <div class="info-item">
                                <label class="info-label">电子邮箱</label>
                                <span class="info-value">zhangdaye@example.com</span>
                            </div>
                            <div class="info-item full-width">
                                <label class="info-label">通讯地址</label>
                                <span class="info-value">北京市朝阳区某某街道某某小区8号楼3单元502室</span>
                            </div>
                            <div class="info-item">
                                <label class="info-label">邮政编码</label>
                                <span class="info-value">100020</span>
                            </div>
                            <div class="info-item">
                                <label class="info-label">偏好联系方式</label>
                                <span class="info-value">电话</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 紧急联系人卡片 -->
                <div class="info-card">
                    <div class="card-header">
                        <h2 class="card-title">
                            <i class="fas fa-user-friends"></i>
                            紧急联系人
                        </h2>
                        <button class="card-action-btn" onclick="editEmergencyContacts()">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="emergency-contacts">
                            <div class="emergency-contact-item">
                                <div class="contact-avatar">张</div>
                                <div class="contact-info">
                                    <div class="contact-name">张小明</div>
                                    <div class="contact-relation">子女</div>
                                    <div class="contact-phone">139****9001</div>
                                </div>
                                <div class="contact-actions">
                                    <button class="contact-action-btn" onclick="callEmergencyContact('13900139001')">
                                        <i class="fas fa-phone"></i>
                                    </button>
                                    <button class="contact-action-btn" onclick="sendEmergencyMessage('13900139001')">
                                        <i class="fas fa-comment"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 旅游偏好卡片 -->
                <div class="info-card">
                    <div class="card-header">
                        <h2 class="card-title">
                            <i class="fas fa-heart"></i>
                            旅游偏好
                        </h2>
                        <button class="card-action-btn" onclick="editTravelPreferences()">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="preference-sections">
                            <div class="preference-section">
                                <h3 class="preference-title">预算偏好</h3>
                                <div class="preference-content">
                                    <span class="preference-tag budget-comfortable">舒适型 (3000-8000元)</span>
                                    <span class="preference-item">支付偏好：微信支付</span>
                                    <span class="preference-item">消费特点：注重品质、追求性价比</span>
                                </div>
                            </div>
                            <div class="preference-section">
                                <h3 class="preference-title">目的地偏好</h3>
                                <div class="preference-content">
                                    <div class="preference-tags">
                                        <span class="preference-tag">华北</span>
                                        <span class="preference-tag">华东</span>
                                        <span class="preference-tag">东南亚</span>
                                        <span class="preference-tag">日韩</span>
                                    </div>
                                </div>
                            </div>
                            <div class="preference-section">
                                <h3 class="preference-title">出行安排</h3>
                                <div class="preference-content">
                                    <span class="preference-item">出行天数：中途 (4-7天)</span>
                                    <span class="preference-item">交通工具：高铁、飞机</span>
                                    <span class="preference-item">住宿标准：舒适型酒店</span>
                                    <span class="preference-item">季节偏好：春季、秋季</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 健康状况卡片 -->
                <div class="info-card">
                    <div class="card-header">
                        <h2 class="card-title">
                            <i class="fas fa-heartbeat"></i>
                            健康状况
                        </h2>
                        <button class="card-action-btn" onclick="editHealthInfo()">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="health-overview">
                            <div class="health-status-item">
                                <span class="health-label">整体健康：</span>
                                <span class="health-badge health-good">健康良好</span>
                            </div>
                            <div class="health-status-item">
                                <span class="health-label">行动能力：</span>
                                <span class="health-badge mobility-good">行动自如</span>
                            </div>
                        </div>
                        <div class="health-details">
                            <div class="health-detail-item">
                                <label class="health-detail-label">慢性疾病</label>
                                <span class="health-detail-value">高血压 (已控制)</span>
                            </div>
                            <div class="health-detail-item">
                                <label class="health-detail-label">用药情况</label>
                                <span class="health-detail-value">降压药 (每日一次，早晨服用)</span>
                            </div>
                            <div class="health-detail-item">
                                <label class="health-detail-label">饮食限制</label>
                                <span class="health-detail-value">低盐低脂</span>
                            </div>
                            <div class="health-detail-item">
                                <label class="health-detail-label">医疗保险</label>
                                <span class="health-detail-value">城镇职工医疗保险</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 家庭信息卡片 -->
                <div class="info-card">
                    <div class="card-header">
                        <h2 class="card-title">
                            <i class="fas fa-home"></i>
                            家庭信息
                        </h2>
                        <button class="card-action-btn" onclick="editFamilyInfo()">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="family-overview">
                            <div class="family-item">
                                <span class="family-label">婚姻状况：</span>
                                <span class="family-value">已婚</span>
                            </div>
                            <div class="family-item">
                                <span class="family-label">决策模式：</span>
                                <span class="family-value">咨询决策</span>
                            </div>
                        </div>
                        <div class="family-members">
                            <h3 class="family-section-title">家庭成员</h3>
                            <div class="family-member-item">
                                <div class="member-avatar">李</div>
                                <div class="member-info">
                                    <div class="member-name">李大妈</div>
                                    <div class="member-relation">配偶</div>
                                    <div class="member-details">
                                        <span class="member-age">65岁</span>
                                        <span class="member-phone">139****8002</span>
                                        <span class="travel-together">经常同行</span>
                                        <span class="travel-attitude support">支持旅游</span>
                                    </div>
                                </div>
                            </div>
                            <div class="family-member-item">
                                <div class="member-avatar">张</div>
                                <div class="member-info">
                                    <div class="member-name">张小明</div>
                                    <div class="member-relation">子女</div>
                                    <div class="member-details">
                                        <span class="member-age">42岁</span>
                                        <span class="member-phone">139****9001</span>
                                        <span class="relationship-close">关系密切</span>
                                        <span class="travel-attitude support">支持旅游</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧辅助信息 -->
            <div class="detail-sidebar">
                <!-- 客户标签 -->
                <div class="sidebar-card">
                    <div class="sidebar-card-header">
                        <h3 class="sidebar-card-title">客户标签</h3>
                        <button class="sidebar-action-btn" onclick="editTags()">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                    <div class="sidebar-card-body">
                        <div class="tag-list">
                            <span class="tag tag-vip">VIP客户</span>
                            <span class="tag tag-health">身体健康</span>
                            <span class="tag tag-communication">易沟通</span>
                            <span class="tag tag-group">喜欢跟团</span>
                            <span class="tag tag-quality">注重品质</span>
                        </div>
                    </div>
                </div>

                <!-- 推荐人信息 -->
                <div class="sidebar-card">
                    <div class="sidebar-card-header">
                        <h3 class="sidebar-card-title">推荐人信息</h3>
                    </div>
                    <div class="sidebar-card-body">
                        <div class="referrer-info">
                            <div class="referrer-item">
                                <span class="referrer-label">推荐人：</span>
                                <span class="referrer-value">王老师</span>
                            </div>
                            <div class="referrer-item">
                                <span class="referrer-label">推荐关系：</span>
                                <span class="referrer-value">朋友推荐</span>
                            </div>
                            <div class="referrer-item">
                                <span class="referrer-label">推荐时间：</span>
                                <span class="referrer-value">2025-01-10</span>
                            </div>
                            <div class="referrer-item">
                                <span class="referrer-label">推荐人电话：</span>
                                <span class="referrer-value">136****7788</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 重要提醒 -->
                <div class="sidebar-card important-notes">
                    <div class="sidebar-card-header">
                        <h3 class="sidebar-card-title">
                            <i class="fas fa-exclamation-triangle"></i>
                            重要提醒
                        </h3>
                    </div>
                    <div class="sidebar-card-body">
                        <div class="note-list">
                            <div class="note-item warning">
                                <i class="fas fa-pills"></i>
                                <span>患有高血压，出行时需注意用药</span>
                            </div>
                            <div class="note-item info">
                                <i class="fas fa-utensils"></i>
                                <span>饮食偏好清淡，需要低盐低脂餐食</span>
                            </div>
                            <div class="note-item success">
                                <i class="fas fa-thumbs-up"></i>
                                <span>沟通配合度高，服务满意度良好</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 快速操作 -->
                <div class="sidebar-card">
                    <div class="sidebar-card-header">
                        <h3 class="sidebar-card-title">快速操作</h3>
                    </div>
                    <div class="sidebar-card-body">
                        <div class="quick-actions">
                            <button class="quick-action-btn" onclick="createOpportunity()">
                                <i class="fas fa-chart-line"></i>
                                <span>创建销售机会</span>
                            </button>
                            <button class="quick-action-btn" onclick="scheduleActivity()">
                                <i class="fas fa-calendar-plus"></i>
                                <span>安排邀约活动</span>
                            </button>
                            <button class="quick-action-btn" onclick="addFollowup()">
                                <i class="fas fa-tasks"></i>
                                <span>添加跟进记录</span>
                            </button>
                            <button class="quick-action-btn" onclick="viewHistory()">
                                <i class="fas fa-history"></i>
                                <span>查看服务历史</span>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 系统信息 -->
                <div class="sidebar-card">
                    <div class="sidebar-card-header">
                        <h3 class="sidebar-card-title">系统信息</h3>
                    </div>
                    <div class="sidebar-card-body">
                        <div class="system-info">
                            <div class="system-info-item">
                                <span class="system-label">创建时间：</span>
                                <span class="system-value">2025-01-15 14:30</span>
                            </div>
                            <div class="system-info-item">
                                <span class="system-label">创建人：</span>
                                <span class="system-value">张经理</span>
                            </div>
                            <div class="system-info-item">
                                <span class="system-label">最后修改：</span>
                                <span class="system-value">2025-01-18 09:15</span>
                            </div>
                            <div class="system-info-item">
                                <span class="system-label">修改人：</span>
                                <span class="system-value">李顾问</span>
                            </div>
                            <div class="system-info-item">
                                <span class="system-label">数据版本：</span>
                                <span class="system-value">v1.3</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 操作确认模态框 -->
    <div class="modal-overlay" id="action-confirm-modal">
        <div class="modal">
            <div class="modal-header">
                <h3 class="modal-title">操作确认</h3>
                <button class="modal-close" onclick="closeModal('action-confirm-modal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <p id="confirm-message">确定要执行此操作吗？</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('action-confirm-modal')">取消</button>
                <button class="btn btn-primary" id="confirm-action-btn">确定</button>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="../scripts/customer-detail.js"></script>
</body>
</html>